<template>
    <div class="pages">
        <div class="bg">
            <!-- 搜索区域 -->
            <div class="searchArea" @click='toSearch'>
                <div class="searchInput">
                    <div>请输入您要搜索的内容</div>
                </div>
            </div>
            <!-- 优惠券1 -->
            <div class="banner" style="margin-top:30px;">
                <img src="../../../static/index/banner.png" alt="">
            </div>
            <!-- 快速通道区域 -->
            <div class="fastGet">
                <ul>
                    <li v-for="(item,index)  in recom" :key="index" :data-id="item.categoryId" :data-parentid="item.categoryId" @click="recomNavBooksea(item.categoryId)">
                        <img src="../../../static/index/children.png" alt="">
                        <p>{{ item.categoryName }}</p>
                    </li>

                </ul>
                <p class="ad">京东半价·100%正版·消毒塑封·满29包邮</p>
            </div>
            <!-- 优惠券2 -->
            <div class="banner" @click='goService'>
                <img src="../../../static/index/banner2.png" alt="">
            </div>
        </div>
        <!-- 达人书单 -->
        <div class="daren">
            <div class="daren-title">
                <h3>达人书单推荐</h3>
                <span @click='getMoreList'>查看全部</span>
            </div>
            <div class="daren-content">
                <ul class="daren-list">
                    <li @click='seeMoreBookList(item.packageId)' v-for='(item,index) in firstList' :key='index'>
                        <img :src="baseImgUrl+item.packageImage" alt="">
                        <p class="title">{{item.packageDescribe}}</p>
                        <p class="bookName">{{item.packageName}}</p>
                    </li>

                </ul>
                <ul class="daren-list" style="padding-bottom:30rpx;">
                    <li @click='seeMoreBookList(item.packageId)' v-for='(item,index) in secondList' :key='index'>
                        <img :src="baseImgUrl+item.packageImage" alt="">
                        <p class="title">{{item.packageDescribe}}</p>
                        <p class="bookName">{{item.packageName}}</p>
                    </li>

                </ul>
            </div>
        </div>
        <!-- 最热书籍 -->
        <div class="daren" style="margin-top:30rpx;">
            <div class="daren-title" style="padding-top:20rpx;">
                <h3>最热书籍</h3>
                <span @click='getMoreLableInfo'>查看全部</span>
            </div>
            <div class="hotBook">
                <ol style="margin-top:15rpx;">
                    <li v-for='(item,index) in hotFirst' :key='index' @click='getMoreLableInfo(item)'>
                        {{item}}
                    </li>
                </ol>
                <ol style="margin-top:30rpx;">
                    <li v-for='(item,index) in hotSecond' :key='index' @click='getMoreLableInfo(item)'>
                        {{item}}
                    </li>

                </ol>
                <ul class="hotBookInfo">
                    <!-- <li v-for='(item,index) in hotBookLabel' :key='index'>
                        <img src="../../../static/index/ym.jpg" alt="">
                        <div class="bookInfo">
                            <p class="bookName">云边有个小卖部</p>
                            <p class="bookAuthor">张嘉佳</p>
                            <p class="bookPrice">
                                <span class="price">¥21.9</span>
                                <span class='discount'>3折</span>
                            </p>
                            <p class="desc">张嘉佳全新作品，写给离开我们的人，写给陪伴...</p>
                        </div>
                        <p class="btn">购买</p>
                    </li> -->
                    <li @click='getBookDetail'>
                        <img src="../../../static/index/ym.jpg" alt="">
                        <div class="bookInfo">
                            <p class="bookName">云边有个小卖部</p>
                            <p class="bookAuthor">张嘉佳</p>
                            <p class="bookPrice">
                                <span class="price">¥21.9</span>
                                <span class='discount'>3折</span>
                            </p>
                            <p class="desc">张嘉佳全新作品，写给离开我们的人，写给陪伴...</p>
                        </div>
                        <p class="btn" @click.stop='buyNow'>购买</p>
                    </li>
                    <li @click='getBookDetail'>
                        <img src="../../../static/index/ym.jpg" alt="">
                        <div class="bookInfo">
                            <p class="bookName">云边有个小卖部</p>
                            <p class="bookAuthor">张嘉佳</p>
                            <p class="bookPrice">
                                <span class="price">¥21.9</span>
                                <span class='discount'>3折</span>
                            </p>
                            <p class="desc">张嘉佳全新作品，写给离开我们的人，写给陪伴...</p>
                        </div>
                        <p class="btn" @clic.stop='buyNow'>购买</p>
                    </li>
                </ul>
                <ul class="bannerList">
                    <li>
                        <img src="../../../static/index/product.png" alt="">
                    </li>
                    <li>
                        <img src="../../../static/index/product.png" alt="">
                    </li>
                    <li>
                        <img src="../../../static/index/product.png" alt="">
                    </li>
                </ul>
            </div>
        </div>
        <!-- 最新上架 -->
        <div class="daren" style="margin-top:30rpx;">
            <div class="daren-title" style="padding-top:20rpx;">
                <h3>最热上架</h3>
                <span>查看全部</span>
            </div>
            <div class="hotBook">
                <ul class="hotBookInfo">
                    <li @click='getBookDetail' v-for='(item,index) in books' :key="index">
                        <img :src="baseImgUrl+item.image" alt="">
                        <div class="bookInfo">
                            <p class="bookName">{{item.bookName}}</p>
                            <p class="bookAuthor">{{item.authorName}}</p>
                            <p class="bookPrice">
                                <span class="price">¥{{item.price}}</span>
                                <span class='discount'>{{item.discount*10}}折</span>
                            </p>
                            <p class="desc">张嘉佳全新作品，写给离开我们的人，写给陪伴...</p>
                        </div>
                        <p class="btn" @clic.stop='buyNow'>购买</p>
                    </li>

                </ul>
            </div>
        </div>
        <i-divider v-if="!more" color="#c78550" lineColor="#c78550">我是有底线的</i-divider>
        <tabBarr current="homepage" />
    </div>
</template>
<script>
import tabBarr from '../../components/tabBar/tabBar'
export default {
    components: {
        tabBarr
    },
    data() {
        return {
            sellTab: [],
            hotpackage: [],
            hotlable: [],
            fiveyuan: [],
            recom: [],
            firstSellGoodId: '',
            bestSellIndexList: [],
            baseImgUrl: this.BaseUrlImg,
            bookList: [],
            hotLable: [],
            scrollTop: 0,
            fixedNav: false,
            firstList: [],
            secondList: [],
            hotFirst: [],
            hotSecond: [],
            hootListLable: [],
            hotBookLabel: [],
            books: [],
            more: true,
            page: 1
        }
    },

    onPageScroll(event) {
        console.log(event)
        // this.handleScroll(event)
    },
    onReachBottom() {
        this.loadMore()
    },
    onShow() {
        wx.hideTabBar()
    },
    mounted() {
        var _this = this
        //查询所有一级分类名称
        this.$http
            .post('/book/recom', {
                page: 1,
                pageSize: 10
            })
            .then(res => {
                console.log(res)
                this.recom = res.data.rows
                wx.setStorageSync('bookNav', this.recom)
                this.sellTab = res.data.rows
                // 获取首页畅销书籍前10个
            })
        this.queryBookList()
        this.hotLabel()
        this.queryBookList() //热门书单
        //最新上架
        this.newRecommend()
    },
    methods: {
        loadMore() {
            if (this.more) {
                this.$http
                    .post('/book/shtj', { page: this.page, pageSize: 10 })
                    .then(res => {
                        this.page++
                        if (res.data.rows.length) {
                            this.books = this.books.concat(res.data.rows)
                        } else {
                            this.more = false
                        }
                    })
            }
        },
        // 畅销榜更多
        goMore() {
            wx.navigateTo({
                url: '../fiction/main'
            })
        },
        //书籍详细
        getBookDetail() {
            wx.navigateTo({
                url: '../booksBuy/main'
            })
        },
        // 购买
        buyNow() {
            wx.navigateTo({
                url: '../cart/main'
            })
        },
        selectBook(e) {
            wx.navigateTo({
                url: '../booksBuy/main?bookId=' + e
            })
        },
        //吸顶
        handleScroll(e) {
            wx
                .createSelectorQuery()
                .select('#recommend')
                .boundingClientRect(rect => {
                    let top = rect.top
                    console.log(top)
                    if (top <= 0) {
                        //临界值，根据自己的需求来调整
                        this.fixedNav = true
                    } else {
                        this.fixedNav = false
                    }
                })
                .exec()
        },

        recomNavBooksea(e) {
            //  跳转到专区搜索页
            wx.navigateTo({
                url: '../fiction/main?id=' + e
            })
        },
        fiveyuanSearch(e) {
            wx.navigateTo({
                url: '../bookSea/main?ids=' + e.currentTarget.dataset.ids
            })
        },
        //上架时间
        newRecommend() {
            this.$http
                .post('/book/shtj', {
                    page: 1,
                    pageSize: 10
                })
                .then(res => {
                    this.books = res.data.rows
                })
        },
        //更多书单
        getMoreList() {
            wx.navigateTo({
                url: '../hotMore/main'
            })
        },
        // 书单详情
        seeMoreBookList(id) {
            wx.navigateTo({
                url: '../hotLists/main?id=' + id
            })
        },
        // 查询热门书单
        queryBookList() {
            this.$http
                .post('/hotpackage/query', { page: 1, pageSize: 6 })
                .then(res => {
                    this.bookList = res.data.rows
                    this.firstList = []
                    this.secondList = []
                    for (let i = 0; i < 3; i++) {
                        this.firstList.push(this.bookList[i])
                    }
                    for (let i = 3; i < this.bookList.length; i++) {
                        this.secondList.push(this.bookList[i])
                    }
                    console.log(this.secondList)
                })
        },
        getMoreLableInfo(keyWord) {
            wx.navigateTo({
                url: '../moreHotLable/main?keyWord=' + keyWord || ''
            })
        },
        // 热门10个书签
        hotLabel() {
            this.$http
                .post('/book/hotlable', { page: 1, pageSize: 10 })
                .then(res => {
                    this.hootListLable = res.data.rows
                    this.firstLable = this.hotFirst = []
                    this.hotSecond = []
                    for (let i = 0; i < 5; i++) {
                        this.hotFirst.push(this.hootListLable[i])
                    }
                    for (let i = 5; i < this.hootListLable.length; i++) {
                        this.hotSecond.push(this.hootListLable[i])
                    }
                    this.getHotLableBookInfo(this.hootListLable[0])
                })
        },
        getHotLableBookInfo(id) {
            this.$http
                .post('/book/bylable', {
                    label: id,
                    page: 1,
                    pageSize: 10
                })
                .then(res => {
                    this.hotBookLabel = res.data.rows
                })
        },
        hotList() {
            wx.navigateTo({
                url: '../hotLists/main'
            })
        },
        toSearch() {
            wx.navigateTo({
                url: '../search/main'
            })
        },
        goDetails() {
            wx.navigateTo({
                url: '../fiction/main'
            })
        },
        goService() {
            wx.navigateTo({
                url: '../service/main'
            })
        }
    }
}
</script>
<style lang='scss'>
.pages {
    background: #eee;
    .bg {
        background: #fff;
        padding: 30rpx 18rpx 18rpx 18rpx;
    }
    padding-bottom: 100rpx;
}
.searchArea {
    background: #fff;
    position: fixed;
    border: 1px solid #ca8c5a;
    border-radius: 10px;
    top: 15px;
    left: 18rpx;
    width: 714rpx;
    opacity: 1;
    z-index: 20;
}
.searchInput {
    height: 60rpx;
    padding-left: 40px;
    background: url(../../../static/index/search.png) no-repeat 30rpx center;
    background-size: 28rpx 28rpx;
    div {
        font-size: 12px;
        background: none;
        line-height: 60rpx;
    }
}

.banner {
    width: 100%;
    img {
        margin-top: 30rpx;
        width: 100%;
        height: 180rpx;
    }
}
.fastGet {
    margin-top: 20rpx;
    box-shadow: 0 0px 20px #eee;
    // border: 1px solid red;
    overflow: hidden;
    padding: 30rpx 0;
    border-radius: 10px;
    p.ad {
        color: #c78550;
        font-size: 16px;
        width: 100%;

        text-align: center;
    }
    ul {
        margin-bottom: 30rpx;
        overflow: hidden;
        li {
            width: 25%;
            float: left;
            text-align: center;
            img {
                width: 82rpx;
                height: 82rpx;
            }
            p {
                font-size: 14px;
                color: #666666;
            }
            &:nth-child(n + 5) {
                margin-top: 40rpx;
            }
        }
    }
}
.daren {
    background: #fff;
    padding: 0 18rpx;
    .daren-title {
        display: flex;
        justify-content: space-between;
        height: 70rpx;

        h3 {
            font-size: 18px;
            color: #000;
            font-weight: 700;
            height: 70rpx;
            line-height: 70rpx;
        }
        span {
            font-size: 12px;
            color: #999999;
            position: relative;
            height: 70rpx;
            line-height: 70rpx;
            padding-right: 20rpx;
            &::after {
                content: '';
                position: absolute;
                width: 15rpx;
                height: 15rpx;
                background: url(../../../static/index/more.png) no-repeat;
                background-size: 15rpx 15rpx;
                right: 0;
                top: 50%;
                transform: translateY(-50%);
            }
        }
    }
    .daren-content {
        .daren-list {
            display: flex;
            justify-content: space-between;
            margin-top: 10px;
            li {
                margin-right: 15rpx;
                box-sizing: border-box;
                &:last-child {
                    margin-right: 0;
                }
                img {
                    width: 100%;
                    height: 290rpx;
                    border-radius: 5px;
                }
                p {
                    font-size: 16px;
                    font-weight: 700;
                    color: #000;

                    &.bookName {
                        margin-top: 5px;
                        font-size: 12px;
                        font-weight: normal;
                        color: #999;
                    }
                }
            }
        }
    }
}
.hotBook {
    ol {
        overflow: hidden;
        display: flex;
        justify-content: space-between;
        & > li {
            background: #f6f6f6;
            padding: 3px 5px;
            color: #6d6d6d;
            border-radius: 5px;

            font-size: 14px;

            font-weight: bolder;
        }
    }
}
.hotBookInfo {
    li {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #eee;
        padding: 30rpx 0;
        img {
            width: 166rpx;
            height: 266rpx;
            border-radius: 5px;
        }
        .bookInfo {
            width: 334rpx;
            .bookName {
                font-size: 16px;
                color: #202020;
            }
            .bookAuthor {
                font-size: 14px;
                color: #202020;
                margin-top: 20rpx;
            }
            .bookPrice {
                font-size: 12px;
                margin-top: 20rpx;
                .price {
                    font-size: 12px;
                    color: #999;
                    margin-right: 30rpx;
                }
                .discount {
                    color: #fe6270;
                }
            }
            .desc {
                margin-top: 20rpx;
                word-break: break-all;
                word-wrap: break-word;
                color: #8290a3;
                font-size: 14px;
            }
        }
        .btn {
            width: 130rpx;
            height: 64rpx;
            border: 1px solid #c78550;
            color: #c78550;
            line-height: 64rpx;
            text-align: center;
            border-radius: 5px;
        }
    }
}
.bannerList {
    padding: 30rpx 0;
    overflow: auto;
    white-space: nowrap;
    li {
        width: 586rpx;
        height: 286rpx;
        margin-right: 30rpx;
        display: inline-block;
        &:last-child {
            margin-right: 0;
        }
        img {
            height: 100%;
            width: 100%;
            border-radius: 5px;
        }
    }
}
</style>


